<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CanSniff</title>
<link rel="shortcut icon" href="./images/logo_icon.ico" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/mchp.js"></script>
</head> 

<body>
<div id="content">
	<!--
	<table id="menu" border="0">
		<tr>
			<th class="active"></th>
			<th class="active"><span class="key">H</span>ome</th>
			<th class="active"></th>
		</tr>
	</table>
	-->
	
		
	<div id="status">
		<div id="loading" style="display:none">Error:<br />Connection to Flyport control board was lost.</div>
	</div>
	
	
	<div id="display">
	
			
			<StateOfCharge: <span id="socval" style="font-weight:normal">?</span>
			<!--Emtr: <span id="torqReqEmtrVal" style="font-weight:normal">?</span>-->
			<!--Emtf: <span id="torqReqEmtfVal" style="font-weight:normal">?</span>-->
			<!--Eng: <span id="torqReqEngVal" style="font-weight:normal">?</span>-->
			<!--FrtAxl:<span id="FrontAxleTorqPosBtm" style="font-weight:normal">?</span>-->
			
	</div>
		
	
	
	<div id ="Background_Car">
	
		<div id="SocBarDisplay">
			<div style=" width:204px; height:20px; background-color:#92b7d3;">
				<div id ="SocBarDisp" style="width:0px; height:20px; background-color:#12365e; border-right:1px white solid;"></div>
				<div style="margin-top:-17px; color:white; padding-left:4px;"><b>State Of Charge</b></div>
			</div>
		</div>
		
		<div id="FrtAxlBarDisplayTopPos">
			<div style=" width:102x; height:20px; background-color:#12365e;">
				<div id ="FrtAxlBarDispPosTop" style="width:110px; height:20px; background-color:#92b7d3; border-right:1px white solid;"></div>
				<div style="margin-top:-17px; color:white; padding-left:4px;"><b>Front Axle Torque</b></div>
			</div>
		</div>
		
		<div id="FrtAxlBarDisplayTopNeg">
			<div style=" width:102px; height:20px; background-color:#92b7d3;">
				<div id ="FrtAxlBarDispNegTop" style="width:0px; height:20px; background-color:#12365e; border-right:1px white solid;"></div>
				
			</div>
		</div>
		
		<div id="FrtAxlBarDisplayBottomPos">
			<div style=" width:102px; height:20px; background-color:#12365e;">
				<div id ="FrtAxlBarDispPosBtm" style="width:110px; height:20px; background-color:#92b7d3; border-right:1px white solid;"></div>
				<div style="margin-top:-17px; color:white; padding-left:4px;"><b>Front Axle Torque</b></div>
			</div>
		</div>
		
		<div id="FrtAxlBarDisplayBottomNeg">
			<div style=" width:102px; height:20px; background-color:#92b7d3;">
				<div id ="FrtAxlBarDispNegBtm" style="width:0px; height:20px; background-color:#12365e; border-right:1px white solid;"></div>
			</div>
		</div>
		
			<div id="RrAxlBarDisplayTopPos">
			<div style=" width:102x; height:20px; background-color:#12365e;">
				<div id ="RrAxlBarDispPosTop" style="width:110px; height:20px; background-color:#92b7d3; border-right:1px white solid;"></div>
				<div style="margin-top:-17px; color:white; padding-left:4px;"><b>Rear Axle Torque</b></div>
			</div>
		</div>
		
		<div id="RrAxlBarDisplayTopNeg">
			<div style=" width:102px; height:20px; background-color:#92b7d3;">
				<div id ="RrAxlBarDispNegTop" style="width:0px; height:20px; background-color:#12365e; border-right:1px white solid;"></div>	
			</div>
		</div>
		
		<div id="RrAxlBarDisplayBottomPos">
			<div style=" width:102px; height:20px; background-color:#12365e;">
				<div id ="RrAxlBarDispPosBtm" style="width:110px; height:20px; background-color:#92b7d3; border-right:1px white solid;"></div>
				<div style="margin-top:-17px; color:white; padding-left:4px;"><b>Rear Axle Torque</b></div>
			</div>
		</div>
		
		<div id="RrAxlBarDisplayBottomNeg">
			<div style=" width:102px; height:20px; background-color:#92b7d3;">
				<div id ="RrAxlBarDispNegBtm" style="width:0px; height:20px; background-color:#12365e; border-right:1px white solid;"></div>
			</div>
		</div>
		
	
		<div id="GsaStatus">
		GSA: <p id="GsaGrVal" style="font-weight:normal">?</p>
		</div>
		
		<div id="EmtfStatus">
		Emtf: <p id="torqReqEmtfVal" style="font-weight:normal">?</p>
		</div>
		
		<div id="EmtrStatus">
		Emtr: <p id="torqReqEmtrVal" style="font-weight:normal">?</p>
		</div>
		
		<div id="EngStatus">
		EngTorq: <span id="torqReqEngVal" style="font-weight:normal">?</p>
		</div>
	</div>
	
	
	
<script type="text/javascript">
<!--
// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData) {
	var mainstat = document.getElementById('display').style.display;
	var loadstat = document.getElementById('loading').style.display;

	// Check if a timeout occurred
	if(!xmlData)
	{
		mainstat = 'none';
		loadstat = 'inline';	

	return;
	}

	// Make sure we're displaying the status display
	mainstat = 'inline';
	loadstat = 'none';
	
		//Read variables from flyport, convert them to integers and make the visible to html page

		var torqReqEmtfVal = getXMLValue(xmlData, 'torqReqEmtfVal');
		var torqReqEngVal  = getXMLValue(xmlData, 'torqReqEngVal');
		var socval = getXMLValue(xmlData, 'socval');
		var torqReqEmtrVal = getXMLValue(xmlData, 'torqReqEmtrVal');
		var GsaGrVal = getXMLValue(xmlData, 'GsaGrVal');
		var GrRatVal = getXMLValue(xmlData, 'GrRatVal');
		var CluInpTrqVal = getXMLValue(xmlData, 'CluInpTrqVal');
		
		torqReqEmtfVal = parseInt(torqReqEmtfVal);
		torqReqEngVal = parseInt(torqReqEngVal);
		socval = parseInt(socval);
		torqReqEmtrVal = parseInt(torqReqEmtrVal);
		GsaGrVal = parseInt(GsaGrVal);
		GrRatVal = parseInt(GrRatVal);
		CluInpTrqVal = parseInt(CluInpTrqVal);
		
		document.getElementById('torqReqEmtfVal').innerHTML = torqReqEmtfVal;
		document.getElementById('torqReqEngVal').innerHTML = torqReqEngVal;
		document.getElementById('socval').innerHTML = socval;
		document.getElementById('torqReqEmtrVal').innerHTML = torqReqEmtrVal;
		document.getElementById('GsaGrVal').innerHTML  = GsaGrVal;
		//document.getElementById('CluInpTrqVal').innerHTML  = CluInpTrqVal;
		//document.getElementById('GrRatVal').innerHTML  = GrRatVal;
		
		//Create the moving bars: soc and torques
		
		var SocBar=0;
		var FrontAxleTorq = 0;
		var RrAxleTorq = 0;
		
		SocBar= socval;
		//FrontAxleTorq = (torqReqEmtfVal+torqReqEngVal)*GrRatVal;
		FrontAxleTorq = CluInpTrqVal*GrRatVal;
		RrAxleTorq = torqReqEmtrVal;
		
		document.getElementById('SocBarDisp').style.width=SocBar*2.04+"px";

		
		if (FrontAxleTorq >= 0) {
		//document.getElementById('FrontAxleTorqPos').innerHTML = FrontAxleTorq;
		//document.getElementById('FrontAxleTorqPos').innerHTML = 0;
		document.getElementById('FrtAxlBarDispPosTop').style.width=110-(FrontAxleTorq*0.0125)+"px";
		document.getElementById('FrtAxlBarDispNegTop').style.width=0+"px";
		document.getElementById('FrtAxlBarDispPosBtm').style.width=110-(FrontAxleTorq*0.0125)+"px";
		document.getElementById('FrtAxlBarDispNegBtm').style.width=0+"px";
		}
		else{
		//document.getElementById('FrontAxleTorqNeg').innerHTML = FrontAxleTorq;
		//document.getElementById('FrontAxleTorqNeg').innerHTML = 0;
		document.getElementById('FrtAxlBarDispNegTop').style.width=-FrontAxleTorq*0.0125+"px";
		document.getElementById('FrtAxlBarDispPosTop').style.width=110+"px";
		document.getElementById('FrtAxlBarDispNegBtm').style.width=-FrontAxleTorq*0.0125+"px";
		document.getElementById('FrtAxlBarDispPosBtm').style.width=110+"px";
		}
		
		if (RrAxleTorq >= 0) {
		document.getElementById('RrAxlBarDispPosTop').style.width=110-(RrAxleTorq*0.075)+"px";
		document.getElementById('RrAxlBarDispNegTop').style.width=0+"px";
		document.getElementById('RrAxlBarDispPosBtm').style.width=110-(RrAxleTorq*0.075)+"px";
		document.getElementById('RrAxlBarDispNegBtm').style.width=0+"px";
		}
		
		else{
		//document.getElementById('FrontAxleTorqNeg').innerHTML = FrontAxleTorq;
		//document.getElementById('FrontAxleTorqNeg').innerHTML = 0;
		document.getElementById('RrAxlBarDispNegTop').style.width=-RrAxleTorq*0.075+"px";
		document.getElementById('RrAxlBarDispPosTop').style.width=110+"px";
		document.getElementById('RrAxlBarDispNegBtm').style.width=-RrAxleTorq*0.075+"px";
		document.getElementById('RrAxlBarDispPosBtm').style.width=110+"px";
		}
		
}
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
//-->
</script>

	
</div>
</body>
</html>
